<template>
  <div class="container">

    <Steps :current="current" class="step-banner">
      <Step title="请选择工程"></Step>
      <Step title="软件选择"></Step>
      <Step title="模型选择"></Step>
      <Step title="参数配置"></Step>
      <Step title="DDS 配置"></Step>
      <Step title="IDL 配置"></Step>
      <Step title="仿真监控"></Step>
    </Steps>

    <div class="settings-body">
      <div v-if="current === 0">
        <div style="margin-bottom: 11px;">请选择工程</div>
        <Select v-model="projectSelected" style="width: 200px;">
          <Option value="project1">工程 1</Option>
          <Option value="project2">工程 2</Option>
          <Option value="project3">工程 3</Option>
        </Select>
      </div>

      <div v-if="current === 1">
        <div style="margin-bottom: 11px;">请选择需要的软件</div>
        <CheckboxGroup v-model="software">
          <Checkbox label="Matlab">
            <span>Matlab</span>
          </Checkbox>
          <Checkbox label="Fluent">
            <span>Fluent</span>
          </Checkbox>
          <Checkbox label="labview">
            <span>labview</span>
          </Checkbox>
          <Checkbox label="automation">
            <span>automation</span>
          </Checkbox>
          <Checkbox label="multisim">
            <span>multisim</span>
          </Checkbox>
          <Checkbox label="proteus">
            <span>proteus</span>
          </Checkbox>
        </CheckboxGroup>
      </div>

      <div v-if="current === 2">
        <!-- 遍历每个选择的软件 -->
        <div v-for="(item, index) in software">
          <Divider class="my-divider" orientation="left">{{item}}</Divider>

          <div style="margin-bottom: 11px;">模型选择</div>
          <RadioGroup v-model="model[index]">
            <!--遍历每个软件拥有的模型-->
            <Radio v-for="tag in softwareModel[item]" :label="tag.value">
              <span>{{tag.label}}</span>
            </Radio>

          </RadioGroup>
          <Divider class="my-divider" orientation="left">请选择具体模型</Divider>
          <!--根据选择的模型，遍历这个模型下拥有的具体模型-->
          <Select v-model="modelSelected[index]" style="width:200px">
            <Option v-for="opt in modelSelection[model[index]]" :value="opt.value" :key="opt.value">{{ opt.label }}</Option>
          </Select>
          <Divider class="my-divider" orientation="left">上传自己的模型</Divider>
          <Upload action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">点击上传</Button>
          </Upload>
        </div>
      </div>

      <div v-if="current === 3">
        <div style="margin-bottom: 11px;">参数配置</div>
        <Row :gutter="44">
          <Col span="12">
          <Form :model="configure.liquidPressureModel">
            <FormItem label="v1">
              <InputNumber :max="10" :min="1" :step="0.1" v-model="configure.liquidPressureModel.val1"></InputNumber>
            </FormItem>
            <FormItem label="v2">
              <InputNumber :max="10" :min="1" :step="0.1" v-model="configure.liquidPressureModel.val2"></InputNumber>
            </FormItem>
            <FormItem label="v3">
              <InputNumber :max="10" :min="1" :step="0.1" v-model="configure.liquidPressureModel.val3"></InputNumber>
            </FormItem>
            <FormItem label="v4">
              <InputNumber :max="10" :min="1" :step="0.1" v-model="configure.liquidPressureModel.val4"></InputNumber>
            </FormItem>
            <FormItem label="v5">
              <InputNumber :max="10" :min="1" :step="0.1" v-model="configure.liquidPressureModel.val5"></InputNumber>
            </FormItem>
          </Form>

          </Col>
          <Col span="12">
          <!-- 示意图 -->
          <img src="../assets/test.png">
          </Col>
        </Row>
      </div>
      <div v-if="current === 4">
        <div style="margin-bottom: 11px;">DDS 配置</div>
        <Form v-for="(item, index) in configure.dds" :model="item" :label-width="60" label-position="left">
          <FormItem label="通道数">
            <InputNumber :max="10" :min="1" :step="1" v-model="item.tunnel"></InputNumber>
          </FormItem>
          <FormItem label="topic">
            <Input v-model="item.topic"></Input>
          </FormItem>
          <FormItem label="变量名">
            <Input v-model="item.varName"></Input>
          </FormItem>
          <FormItem label="SoQ">
            <Select v-model="item.soqSelected" style="width:200px">
              <Option v-for="opt in item.soq" :value="opt.value" :key="opt.value">{{ opt.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="变量类型">
            <Select v-model="item.varTypeSelected" style="width:200px">
              <Option v-for="opt in item.varType" :value="opt.value" :key="opt.value">{{ opt.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="删除配置">
            <Button type="error" @click="handleDeleteDDS(index)">删除</Button>
          </FormItem>
          <Divider/>

        </Form>
        <Button type="primary" @click="handleAddDDS">新建</Button>
      </div>

      <div v-if="current === 5">
        <div style="margin-bottom: 11px;">IDL 配置</div>
        <Form v-for="(item, index) in configure.idl" :model="item" :label-width="60" label-position="left">
          <FormItem label="内存大小">
            <InputNumber :max="10240" :min="1" :step="1" v-model="item.memSize"></InputNumber>
          </FormItem>
          <FormItem label="进程数">
            <InputNumber :max="10240" :min="1" :step="1" v-model="item.process"></InputNumber>
          </FormItem>
          <FormItem label="变量名">
            <Input v-model="item.varName"></Input>
          </FormItem>
          <FormItem label="变量类型">
            <Select v-model="item.varTypeSelected" style="width:200px">
              <Option v-for="opt in item.varType" :value="opt.value" :key="opt.value">{{ opt.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="删除配置">
            <Button type="error" @click="handleDeleteIDL(index)">删除</Button>
          </FormItem>
          <Divider/>
        </Form>
        <Button type="primary" @click="handleAddIDL">新建</Button>

      </div>
      <div v-if="current === 6">
        <simulate @back="current--;"></simulate>
      </div>
    </div>
    <div class="action" v-if="current !== 6">
      <Button v-if="current !== 0" type="primary" @click="prev" class="action-btn">上一步</Button>
      <Button v-if="current !== 6" type="primary" @click="next" class="action-btn">下一步</Button>
    </div>
  </div>
</template>

<script>
  import Simulate from './Simulate'
  export default {
    name: 'settings',
    components: {
      Simulate
    },
    data() {
      return {
        current: 0,
        software: [],
        model: [],
        projectSelected: '',
        softwareModel: {
          'Matlab': [{label: '液压传动', value: 'liquidPressureModel'}, {label: '图像处理', value: 'picProcessModel'}],
          'Fluent': [{label: '液压传动', value: 'liquidPressureModel'}, {label: 'PID', value: 'pidModel'},],
          'automation': [{label: 'PID', value: 'pidModel'}, {label: '神经网络', value: 'neuralNetworkModel'}],
          'multisim': [{label: '神经网络', value: 'neuralNetworkModel'}, {label: '图像处理', value: 'picProcessModel'}],
          'proteus': [{label: 'PID', value: 'pidModel'}, {label: '图像处理', value: 'picProcessModel'}],
          'labview': [{label: 'PID', value: 'pidModel'}, {label: '图像处理', value: 'picProcessModel'}],

        },
        blankIDL: {
          memSize: 1024,
          varType: [
            {
              value: 'int',
              label: 'int'
            },
            {
              value: 'float',
              label: 'float'
            },
            {
              value: 'double',
              label: 'double'
            },
          ],
          varTypeSelected: ''

        },
        blankDDS: {
          topic: '',
          varName: '',
          tunnel: 1,
          varTypeSelected: '',
          soqSelected: '',
          varType: [
            {
              value: 'int',
              label: 'int'
            },
            {
              value: 'float',
              label: 'float'
            },
            {
              value: 'double',
              label: 'double'
            },
          ],
          soq: [
            {
              value: '低',
              label: '低'
            },
            {
              value: '中',
              label: '中'
            },
            {
              value: '高',
              label: '高'
            },
          ]
        },
        modelSelection: {
          liquidPressureModel: [
            {
              value: '液压传动',
              label: '液压传动'
            },
          ],
          pidModel: [
            {
              value: 'PID 控制',
              label: 'PID 控制'
            },
          ],
          picProcessModel: [
            {
              value: '图像处理',
              label: '图像处理'
            },
          ],
          neuralNetworkModel: [
            {
              value: 'KNN',
              label: 'KNN'
            },
          ],
          currentModel: [
            {
              value: '液压传动',
              label: '液压传动'
            },
          ],
        },

        modelSelected: [],
        configure: {
          liquidPressureModel: {
            val1: 1,
            val2: 1,
            val3: 1,
            val4: 1,
            val5: 1,
          },
          idl: [{
            process: 1,
            varName: '',
            memSize: 1024,
            varTypeSelected: '',
            varType: [
              {
                value: 'int',
                label: 'int'
              },
              {
                value: 'float',
                label: 'float'
              },
              {
                value: 'double',
                label: 'double'
              },
            ],
          }],
          dds: [{
            topic: '',
            varName: '',
            tunnel: 1,
            varTypeSelected: '',
            soqSelected: '',
            varType: [
              {
                value: 'int',
                label: 'int'
              },
              {
                value: 'float',
                label: 'float'
              },
              {
                value: 'double',
                label: 'double'
              },
            ],
            soq: [
              {
                value: '低',
                label: '低'
              },
              {
                value: '中',
                label: '中'
              },
              {
                value: '高',
                label: '高'
              },
            ]
          }]
        }
      }
    },
    // watch: {
    //   model: function (newVal, oldVal) {
    //     console.log(newVal)
    //     switch (newVal) {
    //       case '液压模型':
    //         this.currentModel = this.liquidPressureModel
    //         this.modelSelected = this.liquidPressureModel[0].value
    //         break
    //       case 'PID 控制':
    //         this.currentModel = this.pidModel
    //         this.modelSelected = this.pidModel[0].value
    //
    //         break
    //       case '图像处理':
    //         this.currentModel = this.picProcessModel
    //         this.modelSelected = this.picProcessModel[0].value
    //
    //         break
    //       case '神经网络':
    //         this.currentModel = this.neuralNetworkModel
    //         this.modelSelected = this.neuralNetworkModel[0].value
    //
    //         break
    //
    //     }
    //   }
    // },
    methods: {
      handleAddDDS() {
        this.configure.dds.push({...this.blankDDS})
      },
      handleDeleteDDS(index) {
        this.configure.dds.splice(index,1)
      },
      handleAddIDL() {
        this.configure.idl.push({...this.blankIDL})
      },
      handleDeleteIDL(index) {
        this.configure.idl.splice(index,1)
      },
      next() {
        this.current++
      },
      prev() {
        this.current--
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .step-banner {
    margin: 20px 0;
  }

  .action {
    display: flex;
    bottom: 0;
    justify-content: center;
    margin: 11px 22px;
  }

  .settings-body {
    margin: 0 auto;
  }

  .action-btn {
    margin: 11px;
  }

  .my-divider {
    max-width: 500px;
  }

</style>
